import React, { useState, useEffect } from 'react';
import { Spin } from 'antd';
import cn from 'classnames';
import events from '@/utils/eventBus';
import EVENTBUS_TYPES from '@/pages/Recruitment/Interview/utils/EVENTBUS_TYPES';
import WARNING_TYPES from '@/pages/Recruitment/Interview/utils/WARNING_TYPES';
import DraggableWrapper from './components/DraggableWrapper';
import RECController from './components/RECController';
import WarningBox from './components/WarningBox';
import ExtendController from './components/ExtendController';
import InterviewerList from './components/InterviewerList';
import styles from './style.less';

const HoverRECButton = ({
    mixedRecordState,
    recData,
    onBeforeStart,
    getRecInfo,
    userCode,
    wsuserCode,
    duration = '00:00:00',
    recorderState = -1,
    realTimeRECRef,
    interviewersArr,
    onlineList,
    warningType, // 警告提示 type
    fightForHost,
    recHOSTuserCode,
    remoteRECState,
    remoteRECStateRef,
    remoteRECDuration
}) => {
    // 加loading，等 websocket 数据充分交换，避免进来就点产生bug
    const [loading, setLoading] = useState(true);
    const [isExtended, setIsExtended] = useState(true);
    const [showExtendBtn, setShowExtendBtn] = useState(false);
    const [isDragging, setIsDragging] = useState(false);
    const [isShake, setIsShake] = useState(false);
    const toggleExtended = () => {
        setIsExtended(!isExtended);
    };
    /**
     * 收到警示信息时需要进行的操作
     */
    const actionToWarning = type => {
        if (type) {
            setIsExtended(true); // 展开！
        } else {
            setIsShake(false); // 不显示警示条就一定不震动
        }
        if (WARNING_TYPES.RED_LIST.includes(type) || type === WARNING_TYPES.WARNING || type === WARNING_TYPES.NOTICE) {
            // 抖动, 无声 + 麦克风故障 + 超过面试开始时间提示 + 连续上传失败
            setIsShake(true);
        }
        if (userCode !== recHOSTuserCode && type === WARNING_TYPES.PAUSED) {
            setIsShake(true); // 非主录音者，在主录音停止之后
        }
    };

    useEffect(() => {
        actionToWarning(warningType);
    }, [warningType]);

    /**
     * 开始震动，针对主录音掉线的情况，特供
     */
    const startShake = () => {
        setIsShake(true);
    };

    /**
     * 处理eventbus传来的折叠、展开请求
     * @param {*} isExt 是否展开
     */
    const handleSetExtend = isExt => {
        setIsExtended(isExt);
    };

    const handleSetLoading = state => {
        setLoading(state);
    };

    useEffect(() => {
        // 监听震动信息
        events.addListener(EVENTBUS_TYPES.SHAKE, startShake);
        // 监听折叠、展开信息
        events.addListener(EVENTBUS_TYPES.SET_EXTEND, handleSetExtend);
        // 设置loading状态
        events.addListener(EVENTBUS_TYPES.SET_LOADING, handleSetLoading);
        return () => {
            events.removeListener(EVENTBUS_TYPES.SHAKE, startShake);
            events.removeListener(EVENTBUS_TYPES.SET_EXTEND, handleSetExtend);
            events.removeListener(EVENTBUS_TYPES.SET_LOADING, handleSetLoading);
        };
    }, []);
    const handelMouseEnter = () => {
        // 鼠标移入
        setShowExtendBtn(true);
    };
    const handelMouseLeave = () => {
        // 鼠标移出
        setShowExtendBtn(false);
    };

    /**
     * 获取拖拽时边框样式
     */
    const getDraggingStyle = () => {
        if (isDragging && !WARNING_TYPES.RED_LIST.includes(warningType)) {
            return styles.isDragging;
        }
        return '';
    };

    return (
        <>
            {mixedRecordState === 0 ? null : (
                <DraggableWrapper
                    onMouseEnter={handelMouseEnter}
                    onMouseLeave={handelMouseLeave}
                    setIsDragging={setIsDragging}
                    isExtended={isExtended}
                    isShake={isShake}
                    className={cn(styles.addBorder, getDraggingStyle())}
                >
                    <Spin spinning={loading} delay={0}>
                        <RECController
                            remoteRECStateRef={remoteRECStateRef}
                            recData={recData}
                            onBeforeStart={onBeforeStart}
                            duration={duration}
                            recorderState={recorderState}
                            isDragging={isDragging}
                            realTimeRECRef={realTimeRECRef}
                            fightForHost={fightForHost}
                            userCode={userCode}
                            recHOSTuserCode={recHOSTuserCode}
                            remoteRECState={remoteRECState}
                            interviewersArr={interviewersArr}
                            remoteRECDuration={remoteRECDuration}
                            getRecInfo={getRecInfo}
                            warningType={warningType}
                        />
                        <WarningBox
                            userCode={userCode}
                            userName={interviewersArr.find(_ => _.employeeCode === wsuserCode)?.employeeName}
                            recHOSTuserCode={recHOSTuserCode}
                            warningType={warningType}
                        />
                        <InterviewerList
                            warningType={warningType}
                            mixedRecordState={mixedRecordState}
                            userCode={userCode}
                            recHOSTuserCode={recHOSTuserCode}
                            isExtended={isExtended}
                            showExtendBtn={showExtendBtn}
                            onlineList={onlineList}
                            list={interviewersArr}
                        />
                        <ExtendController
                            showExtendBtn={showExtendBtn}
                            isExtended={isExtended}
                            onClick={toggleExtended}
                        />
                    </Spin>
                </DraggableWrapper>
            )}
        </>
    );
};

export default React.memo(HoverRECButton);
